import React, {PropsWithChildren, useEffect, useRef, useState} from 'react'
import {Button, Form, InputNumber, InputRef, Popover} from "antd";
import {QueryGoodsUnitResponse} from "../apis/GoodsApi";
import GoodsUnitSelect from "./GoodsUnitSelect";

export interface EditAmountAndUnitPopoverProps extends PropsWithChildren {
    onConfirm: (data: AmountAndUnitFormData) => Promise<void>
    units: Array<QueryGoodsUnitResponse>
    initialData: AmountAndUnitFormData
}

interface AmountAndUnitFormData {
    amount: number
    unitId?: number
    price?:number
}

const EditAmountAndUnitPopover: React.FC<EditAmountAndUnitPopoverProps> = ({
                                                                               units,
                                                                               onConfirm,
                                                                               initialData,
                                                                               children
                                                                           }) => {
    const [loading, setLoading] = useState(false)
    let [form] = Form.useForm<AmountAndUnitFormData>();
    const inputRef = useRef<InputRef>(null);
    const [open, setOpen] = useState(false)
    useEffect(() => {
        if (open) {
            form.resetFields()
            form.setFieldsValue(initialData)
            setInterval(() => {
                inputRef.current?.focus()
            }, 50)
        }
    }, [open, form]);

    return <>
        <span onClick={event => {
            event.stopPropagation()
        }}><Popover open={open} trigger={"click"} title={"修改货品数量"}
                    onOpenChange={visible => setOpen(visible)}
                    content={
                        <Form<AmountAndUnitFormData> name={"AddRole"}
                                                     onFinish={(values) => {
                                                         if (!loading) {
                                                             setLoading(true)
                                                             onConfirm(values).then(() => {
                                                                 setOpen(false)
                                                             }).finally(() => {
                                                                 setLoading(false)
                                                             })
                                                         }
                                                     }}
                                                     initialValues={initialData}
                                                     autoComplete={"off"}
                                                     form={form}>
                            <Form.Item name={"amount"} label={"数量"}
                                       rules={[{
                                           required: true,
                                           message: `请输入数量`
                                       }, {type: "number", min: 1}]}>
                                <InputNumber autoFocus={true}
                                             placeholder={"货品数量"}
                                             onPressEnter={event => {
                                                 if (!loading) {
                                                     form.submit()
                                                 }
                                             }}/>
                            </Form.Item>
                            {!!units.length &&
                                <Form.Item name={"unitId"} label={"单位"}
                                           rules={[{
                                               required: true,
                                               message: `请输入单位`
                                           }]}>
                                    <GoodsUnitSelect units={units}
                                                     onKeyDown={(event) => {
                                                         event.key === "Enter" && form.submit()
                                                     }}/>
                                </Form.Item>}
                            <Form.Item>
                                <Button loading={loading} onClick={() => {
                                    form.submit()
                                }} type={"primary"}
                                        size={"small"}>保存</Button>
                            </Form.Item>
                        </Form>
                    }>
            {children}
        </Popover></span>
    </>
}

export default EditAmountAndUnitPopover


